<template>
	<view>
		<!-- 头部样式 -->
		<view class="top">
			小兔鲜儿   <text>新鲜 亲民 快捷</text>
			<view class="">
				<input type="text" placeholder="搜索商品" @click="sou"/>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in tu" :key="item.id">
					<image :src="item.imgUrl" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 金刚区 -->
		<view class="fen">
			<view class="fen-one" v-for="(item,index) in fen" :key="index">
				<image :src="item.picture" mode=""></image>
				<!-- <img :src="item.picture" alt="" /> -->
				{{item.name}}
			</view>
		</view>
		<!-- 新鲜好物 -->
		<view class="a">
			<view class="xin">
				<view class="xin-one">
					<view class="wu">新鲜好物</view>
					<view class="sheng">生活加分项</view>
				</view>
				<view class="xin-two" >
						<image v-for="(item,index) in xin " :key="index" :src="item.picture" mode=""></image>
					</view>
					<!-- <image src="" mode=""></image> -->
			</view>
			<!-- 新鲜好物 -->
			<view class="xin">
				<view class="xin-one">
					<view class="wu">新鲜好物</view>
					<view class="sheng">生活加分项</view>
				</view>
				<view class="xin-two" >
						<image v-for="(item,index) in xin " :key="index" :src="item.picture" mode=""></image>
					</view>
					<!-- <image src="" mode=""></image> -->
			</view>
		</view>
		
		<!-- 爆款好物 -->
		<view class="a1">
			<view class="bao">
				<view class="bao-one">
					<view class="wu">新鲜好物</view>
					<view class="sheng">生活加分项</view>
				</view>
				<view class="bao-two" >
						<image v-for="(item,index) in xin " :key="index" :src="item.picture" mode=""></image>
					</view>
					
					<!-- <image src="" mode=""></image> -->
			</view>
			<!-- 新鲜好物 -->
			<view class="bao">
				<view class="bao-one">
					<view class="wu">新鲜好物</view>
					<view class="sheng">生活加分项</view>
				</view>
				<view class="bao-two" >
						<image v-for="(item,index) in xin " :key="index" :src="item.picture" mode=""></image>
					</view>
					<!-- <image src="" mode=""></image> -->
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="cai">
			猜你喜欢
		</view>
		<!-- 商品区 -->
		<view class="">
			<view class="">
				<image src="" mode=""></image>
				<text></text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {lun,fen,xin, login} from '../../reques/api.js'
	export default {
		data() {
			return {
				tu:'', //轮播图
				fen:'',//分类
				 xin:'',//新鲜好物
			};
		},
		created() {
			// 拿到轮播图数据
			lun({}).then(res=>{
				this.tu=res.data.result
				// console.log(this.tu);
			}),
			// 拿到分类的数据
			fen({}).then(res=>{
				console.log(res.data.result);
				this.fen=res.data.result
			}),
			// 拿到新鲜好物的数据
			xin({}).then(res=>{
				// console.log(res.data.result);
				this.xin=res.data.result.splice(0,2)
				// console.log(this.xin);
			})
		},
		methods:{
			sou(){
				uni.navigateTo({
					url:'/pages/sou/sou'
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #ccc;
	}
.top{
	width: 100%;
	height: 300rpx;
	background-color: #00bf9c;
	padding:50rpx  20rpx 20rpx;
	box-sizing: border-box;
	color: #fff;
	input{
		height: 80rpx;
		border-radius: 40rpx;
		background-color:#80e2d1;
		margin-top: 40rpx;
		padding: 20rpx ;
		box-sizing: border-box;
		color: #fff;
		::placeholder {
		  color: #000; /* 设置为灰色 */ 
		}
	}
	image{
		width: 100%;
		height: 100%;
	}
}
.fen{
	width: 100%;
	height: 400rpx;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-top: 20rpx;
	.fen-one{
		width: 20%;
		height: 140rpx;
		text-align: center;
		margin-top: 20rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.xin-two{
		display: flex;
	}
}
.a{
	display: flex;
	
	padding: 20rpx 0 ;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx;
	// padding: 0 20rpx;
	.xin{
		width: 45%;
		border-bottom:1px solid #ccc ;
		border-right:1px solid #ccc ;
		margin-left: 10rpx;
		.xin-one{
			display: flex;
			font-size: 30rpx;
			
			.wu{
				font-size: 40rpx;
				font-weight: 400;
				color: #000;
				margin-right: 20rpx;
			}
			.sheng{
				color: #ccc;
			}
			
		}
			.xin-two{
				image{
					width: 100rpx;
					height: 100rpx;
					margin: 20rpx 10rpx;
				}
			}
	}
}
.a1{
	display: flex;
	padding: 20rpx 0 ;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 0 20rpx;
	margin: 20rpx;
	.bao{
		width: 45%;
		border-bottom:1px solid #ccc ;
		border-left:1px solid #ccc ;
		.bao-one{
			display: flex;
			font-size: 30rpx;
			
			.wu{
				font-size: 40rpx;
				font-weight: 400;
				color: #000;
				margin-right: 20rpx;
			}
			.sheng{
				color: #ccc;
			}
			
		}
			.bao-two{
				
				image{
					width: 100rpx;
					height: 100rpx;
					margin: 20rpx 10rpx;
				}
			}
	}
}
.cai{
	width: 100%;
	height: 100rpx;
	font-size: 40rpx;
	font-weight: 500;
	text-align: center;
}
</style>
